<template>
  <div>
    <van-nav-bar title="实名认证">
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        slot="left"
        width="20"
        height="20"
        @click="leftClick"
      />
    </van-nav-bar>
    <van-cell-group>
      <van-field
        v-model="realname"
        label="真实姓名"
        placeholder="请输入您的真实姓名"
      />
    </van-cell-group>
    <van-cell-group>
      <van-field
        v-model="idcard"
        label="身份证号"
        placeholder="请输入您的二代身份证号码"
      />
    </van-cell-group>
    <div class="realname-main">
      <p class="realname-title">请拍摄如下照片用于认证,可点击放大查看示例</p>
      <p class="realname-count">（上传图片占用较大流量，建议使用WIFI）</p>
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="(item, index) in imgeslist" :key="index">
          <van-image
            :src="item"
            width="100"
            height="80"
            @click="getImg(imgeslist, index)"
          />
        </van-grid-item>
      </van-grid>
      <div class="img_xia">
        <img
          src="../../assets/image/img_realname_xia.png"
          width="20"
          height="20"
          alt=""
        />
      </div>
      <van-grid :border="false" :column-num="3">
        <!-- 1 -->
        <van-grid-item>
          <van-uploader
            v-model="fileList1"
            :max-count="1"
            multiple
            capture="camera"
            preview-size="90"
            image-fit
            :after-read="afterRead"
          >
            <div slot="default">
              <img
                src="~assets/image/img_realname_placeholder1.png"
                alt=""
                width="80"
                height="80"
              />
            </div>
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">
                {{ file.name }}
              </div>
            </template>
          </van-uploader>
        </van-grid-item>
        <!-- 2 -->
        <van-grid-item>
          <van-uploader
            v-model="fileList2"
            :max-count="1"
            preview-size="90"
            multiple
            capture="camera"
            image-fit
            :after-read="afterRead"
          >
            <div slot="default">
              <img
                src="~assets/image/img_realname_placeholder2.png"
                alt=""
                width="80"
                height="80"
              />
            </div>
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">
                {{ file.name }}
              </div>
            </template>
          </van-uploader>
        </van-grid-item>
        <!-- 3 -->
        <van-grid-item>
          <van-uploader
            v-model="fileList3"
            :max-count="1"
            preview-size="90"
            multiple
            capture="camera"
            image-fit
            :after-read="afterRead"
          >
            <div slot="default">
              <img
                src="~assets/image/img_realname_placeholder3.png"
                alt=""
                width="80"
                height="80"
              />
            </div>
            <template #preview-cover="{ file }">
              <div class="preview-cover van-ellipsis">
                {{ file.name }}
              </div>
            </template>
          </van-uploader>
        </van-grid-item>
      </van-grid>
      <p>● 请保证您的年龄符合18-80周岁</p>
      <p>● 必须上传身份证正反面照片</p>
      <p>● 手持证件照片需拍到持有人五官,请勿佩戴眼镜、帽子等遮罩物</p>
      <p>● 未达到示例标准、照片不清晰、经过编辑处理等非正常拍摄都不予通过</p>
      <van-button @click="handleClick">立即实名</van-button>
    </div>
  </div>
</template>
<script>
import { ImagePreview } from "vant";
import {
  uploadRealNameCertificationImage,
  executeVerifyRealNameInfoApi,
} from "network/ApiServe";

export default {
  created() {
    this.brandId = localStorage.getItem("brandId");
    this.phone = localStorage.getItem("phone");
    this.token = localStorage.getItem("token");
  },
  data() {
    return {
      realname: "",
      idcard: "",
      fileList1: [],
      fileList2: [],
      fileList3: [],
      file: {
        name: "",
      },

      imgeslist: [
        require("../../assets/image/img_realname_z.png"),
        require("../../assets/image/img_realname_bg.png"),
        require("../../assets/image/img_realname_hold.png"),
      ],
    };
  },
  methods: {
    leftClick() {
      this.$router.back(-1);
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // if (this.fileList1.length == 1) {
      //   this.fileList1.splice(1);
      //   // return;
      // }
      // if (this.fileList2.length == 1) {
      //   this.fileList2.splice(1);
      //   return;
      // }
      // if (this.fileList3.length != 1) {
      //   this.fileList3.splice(1);
      //   return;
      // }
      console.log("11", this.fileList1[0]);
      let formData = new FormData();
      formData.append("phone", this.phone);
      formData.append("brandId", this.brandId);
      formData.append("image", this.fileList1[0].file);
      formData.append("image", this.fileList2[0].file);
      formData.append("image", this.fileList3[0].file);
      if (
        this.fileList1.length == 1 &&
        this.fileList2.length == 1 &&
        this.fileList3.length == 1
      ) {
        uploadRealNameCertificationImage(formData)
          .then((res) => {
            if (res.resp_code === "000000") {
              this.$toast("上传" + res.resp_message);
            }
            console.log(res);
          })
          .catch((err) => {
            console.log("err", err);
          });
      }
    },

    getImg(list, index) {
      switch (index) {
        case 0:
        case 1:
        case 2:
          ImagePreview({
            images: this.imgeslist,
            showIndex: true,
            startPosition: index,
            closeable: true,
          });
          break;
      }
    },
    handleClick() {
      if (this.realname.length == 0) {
        this.$toast("请输入您的真实姓名");
      }
      if (this.idcard.length == 0) {
        this.$toast("请输入您的二代身份证号码");
      }
      console.log("realname", this.realname);
      console.log("idcard", this.idcard);

      executeVerifyRealNameInfoApi(this.token, this.realname, this.idcard)
        .then((res) => {
          if (res.resp_code == "000000") {
            this.$router.back(-1);
          } else {
            this.$toast(res.resp_message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.realname-main {
  background-color: #fff;
  padding: 15px 10px;
  margin-top: 10px;
  font-size: 14px;
}

.realname-title {
  text-align: center;
  font-size: 16px;
  color: #444;
}
.realname-count {
  color: #666;
  text-align: center;
  margin-bottom: 8px;
}
.img_xia {
  text-align: center;
}
p {
  color: red;
  line-height: 22px;
}
.van-button {
  width: 94%;
  margin: 10px auto;
  background-color: red;
  color: #fff;
  display: block;
  border-radius: 7px;
  font-size: 16px;
}
.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 98%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
</style>